<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: 侯瑜
 * @LastEditTime: 2022-01-10 19:47:35
-->
<template>
  <!--1. 容器 -->
  <div ref="Bottom2_container" id="container" style="height: 95%"></div>
</template>
<script>

import { Radar } from '@antv/g2plot';
export default{
  data(){
    return{
      dataArr:[
               {   "item": "1k-2k",  "score": 34  },
               {   "item": "2k-3k",  "score": 96  },
               {   "item": "3k-4k",  "score": 193  },
               {   "item": "4k-5k",  "score":  237 },
               {   "item": "5k-6k",  "score": 215  },
               {   "item": "6k-7k",  "score": 189  },
               {   "item": "7k-8k",  "score": 231  },
               {   "item": "8k-9k",  "score": 124  },
               {   "item": "9k-10k",  "score": 74  },
               {   "item": "10k+",  "score": 69  },
               ]
    }
  },
  created(){

  },
  mounted(){
    this.initChart()
  },
  methods:{
    initChart(){

      
      const radarPlot = new Radar(this.$refs.Bottom2_container , {
            data:this.dataArr,
            xField: 'item',
      yField: 'score',
      meta: {
        score: {
          alias: '分数',
          min: 0,
          max: 250,
        },
      },
      xAxis: {
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {
              lineDash: null,
            },
          },
        },
      },
      yAxis: {
        line: null,
        tickLine: null,
        grid: {
          line: {
            type: 'line',
            style: {
              lineDash: null,
            },
          },
        },
      },
      // 开启辅助点
      point: {
        size: 2,
      },
    });

     radarPlot.render();
    }
  }

}
</script>
<style scoped>

</style>